<template>
  <el-container>
    <!--  头部  -->
    <el-header>
      <Header
          @backToScreen="backToScreen"
          @menuCollapse="menuCollapse"
          :collapseFlag="collapseFlag"
          :currOptionNum="currOptionNum"
          @tabChanged="tabChanged"
      />
    </el-header>

    <el-container>
      <el-aside style="width: auto">
        <Menu
            @menuChange="menuChange"
            mode="vertical"
            :collapseFLag="collapseFlag"
        />
      </el-aside>

      <el-main>
        <router-view :currTabNum="currTabNum"></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
// ------------ aside -----------------
import Menu from "./aside/menu"
import Header from "./header/index"

export default {
  components: {
    Menu,
    Header
  },
  data() {
    return {
      // ---------- aside用参数 -------------
      collapseFlag: false,
      // ---------- head用参数 ----------
      currOptionNum: 1,
      // --------- main用参数 ------------
      currTabNum: 1,
      currPageNum: 1
    }
  },
  methods: {
    // --------------- 功能 ----------------

    /**
     * 导航收缩与展开
     */
    menuCollapse: function () {
      this.collapseFlag = !this.collapseFlag
    },

    /**
     * 导航变化
     * @param val
     */
    menuChange: function (val) {
      this.currOptionNum = Number(val);
      this.currPageNum = Number(val);
      this.currTabNum = 1;
      if (val === "work") {
        location.replace("#/work");
        location.reload();
      }
      // if (val === "bigData") {
      //   location.replace("#/bigData");
      //   location.reload();
      // }
    },

    /**
     * 标签页发生变化
     * @param val
     */
    tabChanged: function (val) {
      this.currTabNum = Number(val)
    },

    /**
     * 返回大屏
     */
    backToScreen: function () {
      this.$router.push({name: "index"})
    }
  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: rgb(255, 255, 255);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: rgb(255, 255, 255);
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: rgb(242, 242, 242);
  color: #333;
  /*text-align: center;*/
}

.el-container {
  height: 100vh;
}

.collapseIcon {
  font-size: 20px;
  line-height: 2vh;
}

.backToScreen {
  line-height: 2vh !important;
  font-size: 20px;
  color: rgb(78, 63, 230);
  margin-right: 1.5vw;
}

.backToScreen:hover {
  line-height: 2vh !important;
  font-size: 25px;
  color: rgb(78, 63, 230);
  margin-right: 1.5vw;
}
</style>